<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont icon-xiangzuo1" @tap="backPage"></view>
			<view class="text" :class="scrrol == true ? 'scrrolHeader' : ''">发布车源</view>
		</view>
		<view class="bg_box">
			<image class="bg01" :src="getImgSrc('/static/bg05.png')" mode="widthFix"></image>
			<view class="bg_content">

				<view class="details_box">
					<view class="details_title">智能填写</view>
					<view class="ttr">
						<textarea maxlength="-1" @blur="changList" :placeholder="pp" class="pp" v-model="auto_c"></textarea>
						<view class="clear_a" @click="clear_a()">清空</view>
					</view>
				</view>

				<view class="details_box">
					<!-- <view class="list">
						<view class="name">标题</view>
						<input type="text" v-model="title" value="" placeholder="请输入标题" />
					</view> -->
					<view class="list">
						<view class="name">批发价 <span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="market_price" value="" placeholder="请输入批发价" />
						<view class="yuan">万元</view>
					</view>
					<!-- <view class="list">
						<view class="name">售价</view>
						<input type="text" v-model="market_price" value="" placeholder="请输入售价" />
						<view class="yuan">万元</view>
					</view> -->
					<view class="list">
						<view class="name">车辆品牌 <span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="brand_name" @click="to_select_model()" placeholder="请选择" />
						<view class="arrow iconfont icon-xiangyou1" @click="to_select_model()"></view>
					</view>
					<view class="list">
						<view class="name">车型 <span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="series_name" value="" placeholder="请输入车型" />
					</view>
					<!-- <view class="list">
						<view class="name">品牌型号</view>
						<input type="text"v-model="info.full_name" placeholder="请选择品牌型号" @click="to_select_model()"/>
						<view class="arrow iconfont icon-xiangyou1" @tap="openAddres"  @click="to_select_model()"></view>
					</view> -->
					<view class="list">
						<view class="name_2">上牌日期<span style="color: red;">*</span></view>
						<view class="right">
							<picker mode="date" fields="month" :style="{'width': '60vw'}" :value="date"
								@change="bindDateChange">
								<input type="text" v-model="reg_time" value="" placeholder="请选择" disabled="true"
									style="pointer-events:none" />
							</picker>
						</view>
						<view class="arrow iconfont icon-xiangyou1" @change="bindDateChange"></view>
					</view>
					<view class="list">
						<view class="name">出厂日期</view>
						<view class="right">
							<picker mode="date" fields="month" :style="{'width': '60vw'}" :value="date"
								@change="bindDateChange_2">
								<input type="text" v-model="production_date" value="" placeholder="请选择" disabled="true"
									style="pointer-events:none" />
							</picker>
						</view>
						<view class="arrow iconfont icon-xiangyou1" @change="bindDateChange_2"></view>
					</view>
					<view class="list">
						<view class="name">指导价格</view>
						<input type="text" v-model="procure_price" value="" placeholder="请输入指导价格" />
						<view class="yuan">万元</view>
					</view>
					<view class="list">
						<view class="name">排放标准</view>
						<input type="text" v-model="outext" value="" placeholder="例如国六" />
					</view>
					<view class="list">
						<view class="name">车辆里程 <span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="mileage" value="" placeholder="请输入车辆里程" />
						<view class="yuan">万公里</view>
					</view>
					<view class="list">
						<view class="name">汽车排量</view>
						<input type="text" v-model="output" value="" placeholder="例如2.5" />
					</view>
					<view class="list">
						<view class="name">手动自动</view>
						<view class="radio_box">
							<!-- <radio-group @change="radioChange">
								<label class="radio">
									<radio color="#FF7701" value="0" checked="true" />手动
								</label>
								<label class="radio">
									<radio color="#FF7701" value="1" />自动
								</label>
							</radio-group> -->
							<radio-group v-model="is_auto">
							    <label class="radio" v-for="(item, index) in radioOptions" :key="index">
									<radio color="#FF7701" :value="item.value" :checked="item.check">{{ item.label }}</radio>
							    </label>
								<!-- <label class="radio">
									<radio color="#FF7701" value="0" checked="true" />手动
								</label>
								<label class="radio">
									<radio color="#FF7701" value="1" />自动
								</label> -->
							</radio-group>
						</view>
					</view>
					<view class="list">
						<view class="name">能源类型</view>
						<view class="radio_box">
							<!-- <radio-group @change="radioChange_2">
								<label class="radio">
									<radio color="#FF7701" value="0" />汽油
								</label>
								<label class="radio">
									<radio color="#FF7701" value="2" />新能源
								</label>
							</radio-group> -->
							<radio-group v-model="en_type">
							    <label class="radio" v-for="(item, index) in radioOptions_2" :key="index">
									<radio color="#FF7701" :value="item.value" :checked="item.check">{{ item.label }}</radio>
							    </label>
							</radio-group>
						</view>
					</view>
					<view class="name_1">汽车配置({{configuration.length}}/130) <span style="color: red;margin-left: 2px;"> *</span></view>
					<view class="textarea">
						<textarea placeholder="例如豪华型或全自动天窗" placeholder-style="color:#B5B5B5" maxlength="130"
							v-model="configuration" />
					</view>
					<view class="list">
						<view class="name">过户次数</view>
						<input type="text" v-model="tran_num" value="" placeholder="请输入过户次数" />
						<view class="yuan">次</view>
					</view>
					<view class="name_1">详细车况({{content.length}}/300) <span style="color: red;margin-left: 2px;"> *</span></view>
					<view class="textarea">
						<textarea placeholder="例如豪华型或全自动天窗" placeholder-style="color:#B5B5B5" maxlength="300"
							v-model="content" />
					</view>
				</view>
				<!-- <view class="details_box">
					<view class="details_title">车辆照片</view>
					<image :src="logo" :style="{width: imageWidth}" mode="widthFix" @tap="up_img()"></image>
				</view> -->
				<view class="details_box">
					<view class="details_title">车辆照片 <span style="color: red;margin-left: 2px;"> *</span></view>
					<!-- <view class="standing">
						<image src="../../static/car01.png" mode="widthFix"></image>
					</view> -->
					<block v-for="(item, index) in imgdata" :key="index">
						<view class="img">
							<image :src="item" mode="" :data-img="imgdata" :data-index="index"
								@tap.stop="openPreviewImage" mode="aspectFill"></image>
							<view class="xx iconfont3" @tap.stop="deleteMsg(index)" v-if="index >= indexNumber">X</view>
						</view>
					</block>
					<image v-if="imgdata.length < 9" :src="getImgSrc('/static/car01.png')" mode="widthFix"
						@tap="getImg()"></image>
				</view>

				<view class="details_box">
					<view class="list">
						<view class="name">联系电话 <span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" v-model="phone" value="" placeholder="请输入联系电话" />
					</view>
					<view class="list">
						<view class="name">车辆所在地 <span style="color: red;margin-left: 2px;"> *</span></view>
						<input type="text" @tap="openAddres" v-model="pickerText" value="" placeholder="请选择车辆所在地" />
						<view class="arrow iconfont icon-xiangyou1" @tap="openAddres"></view>
					</view>
				</view>

				<view class="clear_box04"></view>
				<view class="confirm" @click="publish">确认发布</view>

			</view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm"
			themeColor="#333"></simple-address>
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	export default {
		data() {
			return {
				page: 1,
				scrrol: false,
				defaultNum: '',
				brand_name: '',
				title: '',
				member_price: '',
				brand_id: 0,
				reg_time: '',
				production_date: '',
				market_price: '',
				outext: '',
				mileage: '',
				output: '',
				is_auto: 9,
				energy: 0,
				configuration: '',
				tran_num: '',
				content: '',
				phone: '',
				procure_price: '',
				pickerText: '',
				date: '2020-01',
				logo: this.getImgSrc('/static/car01.png'),
				imgdata: [],
				indexNumber: 0,
				imageWidth: '100%',
				cityPickerValueDefault: [0, 0, 1],
				prov: '',
				city: '',
				area: '',
				is_vip: 0,
				keyword: '上牌日期',
				info_id:0,
				series_id:0,
				group_id:0,
				series_name:'',
				auto_c:'',
				en_type:0,
				info: {
					id: 0,
					name: '',
					full_name : '',
				},
				radioOptions: [
				    { label: '手动', value: '0', check:false},
				    { label: '自动', value: '1', check:false},
				],
				radioOptions_2: [
				    { label: '汽油', value: '0', check:false},
				    { label: '新能源', value: '2', check:false},
				],
				pp:`请在此处粘贴秒杀信息模板，如\n批发价:\n【车辆型号】\n【上牌日期】\n【出厂日期】\n【指导价格】\n【排 量】\n【排放标准】\n【真实公里】\n【手动自动】\n【车辆配置】\n【详细车况】\n【过户次数】\n【所在地区】\n【联系电话】`,
			}
		},
		components: {
			simpleAddress
		},
		onLoad(e) {
			let that = this;
			console.log(e.id)
			if (e.id) {
				that.defaultNum = '闽A32738';
			}
			uni.$on('select_info', (data) => {
				// console.log('发布页', data)
				this.info = data;
				this.info_id = data.id;
				if (this.title == ''){
					this.title = data.full_name;
				}
			});
			uni.$on('pu_brand', (data) => {
				if (data == 0) {
					that.brand_id = 0;
					that.brand_name = '请选择';
				} else {
					that.brand_id = data.id;
					that.brand_name = data.name;
				}
			});
			that.loadData();
			// let getValue = '一口价:7.7;【车辆型号】 思域;【上牌日期】 20 年6;【出厂日期】 20 年5v【指导价】 13.99;【排量】 1.5;【排放标准】100;【真实公里】 4.5 实表;【 车辆颜色】 自;【 车辆配置】 本田 思域 2019 款220 TURBO CVT劲动版;【车况】 右后门、 右后叶子板喷漆、 其余原漆、 无拆卸换件;【 过户次数】 1;【 所 在 地】 山东;联系电话】 13168181821;【 联系微信】 同步;';			
		},
		onUnload() {
			uni.$off('select_info');
		},
		methods: {
			changList(e) {
				console.log(e);
				let searchResult = e.detail.value;
				this.Net._post('other/automatic_recognition', {text:searchResult}, res => {
					if (res.code == 1) {
						// console.log(res.data)
						this.market_price = res.data.price;
						this.title = res.data.brand_name;
						this.brand_name = res.data.n_brand_name;
						this.info.full_name = res.data.brand_name;
						this.reg_time = res.data.reg_time;
						this.production_date = res.data.production_date;
						this.procure_price =  res.data.procure_price;
						this.output = res.data.output;
						this.outext = res.data.outext;
						this.mileage = res.data.mileage;
						this.configuration = res.data.configuration;
						this.content = res.data.content;
						this.tran_num = res.data.tran_num;
						this.pickerText = res.data.pickerText;
						this.phone = res.data.phone;
						this.prov = res.data.prov;
						this.city = res.data.city;
						this.brand_id = res.data.brand_id;
						this.group_id = res.data.group_id;
						this.series_id = res.data.series_id;
						this.is_auto = res.data.is_auto;
						this.series_name = res.data.brand_name;
						this.en_type = res.data.en_type;
						const is_auto = res.data.is_auto;
						this.radioOptions[is_auto].check = true;
						const en_type = res.data.en_type;
						this.radioOptions_2[en_type].check = true;
					}
				});
				// searchResult =searchResult.split("\n");
				// this.market_price = searchResult[0].substring(4);
				// this.title = searchResult[1].substring(6);
				// var data = searchResult.filter(item => item.title.includes(this.keyword));
			},
			get_brand_id(){
				let that = this;
				that.Net._get('other/get_brand_id', {brand_name:this.brand_name}, res => {
					if (res.code == 1) {
						that.brand_id = res.data.brand_id;
					}
				});
			},
			get_city(){
				let that = this;
				that.Net._get('other/get_city', {city:this.pickerText}, res => {
					if (res.code == 1) {
						this.pickerText = res.data.pickerText;
						this.prov = res.data.prov;
						this.city = res.data.city;
					}
				});
			},
			numberInputResult(e) {
				console.log('结果--' + e)
			},
			setRule(e) {
				let that = this;
				let index = e.currentTarget.dataset.index;
				that.flowList[index].tick = !that.flowList[index].tick
			},
			loadData() {
				let that = this;
				that.Net._get('auth/member/get_info', {}, res => {
					if (res.code == 1) {
						that.is_vip = res.data.is_vip;
					}
				});
			},
			to_select_model() {
				uni.navigateTo({
					//url: '/pages/goods/model_list',
					url: '/pages/brand/brand_d'
				});
			},
			bindDateChange: function(e) {
				let that = this;
				that.reg_time = e.target.value;
				that.date = e.target.value;
			},
			bindDateChange_2: function(e) {
				let that = this;
				that.production_date = e.target.value;
			},
			radioChange(e) {
				let that = this;
				that.is_auto = e.detail.value;
			},
			radioChange_2(e) {
				let that = this;
				that.energy = e.detail.value;
			},
			clear_a(){
				let that = this;
				that.auto_c = '';
				
				that.changList({
					detail:{value: "", cursor: 2}
				});
			},
			getImg() {
				let that = this;
				let countNum;
				if (that.imgdata.length == 0) {
					countNum = 3;
				} else if (that.imgdata.length == 1) {
					countNum = 2;
				} else if (that.imgdata.length > 1) {
					countNum = 1;
				}
				if (that.imgdata.length >= 9){
					that.Msg.Fail('已上传9张图');
					return '';
				}
				uni.chooseImage({
					count: 9,
					sizeType: ['original', 'compressed'], // 可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], // 可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; // 图片选择完成后 获取该图片的路劲
						//console.log(temFilePath)
						for (var i = 0; i < temFilePath.length; i++) {
							uni.uploadFile({
								url: that.Cfg.Setting.root + 'index/lb_upload', // 上传文件的Controller
								filePath: temFilePath[i], // 要上传的文件路径
								name: 'file',
								success: res => {
									//console.log(JSON.parse(res.data))
									let imgData = JSON.parse(res.data);
									that.imgdata = that.imgdata.concat(imgData.data);
								}
							});
						}
					}
				});
			},
			deleteMsg(n) {
				if (n == -2) {
					this.imgdata = [];
				} else {
					this.imgdata.splice(n, 1);
				}
			},
			up_img(e) {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], // 可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], // 可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; // 图片选择完成后 获取该图片的路劲
						uni.uploadFile({
							url: that.Cfg.Setting.root + 'index/lb_upload', // 上传文件的Controller
							filePath: temFilePath[0], // 要上传的文件路径
							name: 'file',
							success: (res) => {
								that.imageWidth = '35%';
								let img = JSON.parse(res.data)
								that.logo = img.data;
							}
						})
					}
				});
			},
			openAddres() {
				this.cityPickerValueDefault = [0, 0, 1];
				this.$refs.simpleAddress.open();
			},
			onConfirm(e) {
				let that = this;
				let pickerText = e.label.split('-');
				that.prov = pickerText[0];
				that.city = pickerText[1];
				that.area = pickerText[2];
				if (pickerText[1] == '市辖区') {
					that.city = pickerText[0];
					that.pickerText = that.prov;
				} else {
					that.pickerText = that.prov + '-' + that.city;
				}
			},
			publish() {
				let that = this;
				/* if (that.is_vip == 0) {
					that.Msg.Fail('会员才可发布车源');
					return '';
				} */
				/* if (that.title == '') {
					that.Msg.Fail('请输入标题');
					return '';
				} */
				/* if (that.logo == this.getImgSrc('/static/car01.png')) {
					that.Msg.Fail('请上传车辆图片');
					return '';
				} */
				if (that.imgdata == '') {
					that.Msg.Fail('请上传车辆图片');
					return '';
				}
				/* if (!that.member_price) {
					that.Msg.Fail('请输入批发价');
					return '';
				} */
				if (that.brand_id == 0 && that.info_id == 0) {
					that.Msg.Fail('请选择品牌');
					return '';
				}
				if (that.reg_time == '') {
					that.Msg.Fail('请选择上牌时间');
					return '';
				}
				if (that.series_name == '') {
					that.Msg.Fail('请输入车型');
					return '';
				}
				/* if (that.production_date == '') {
					that.Msg.Fail('请选择出厂日期');
					return '';
				} */
				if (that.market_price == '') {
					that.Msg.Fail('请填写售价');
					return '';
				}
				if (that.mileage == '') {
					that.Msg.Fail('请输入行使里程');
					return '';
				}
				/* if (that.output == '') {
					that.Msg.Fail('请填写排放量');
					return '';
				}
				if (that.tran_num == '') {
					that.Msg.Fail('请输入过户次数');
					return '';
				} */
				if (that.phone == '') {
					that.Msg.Fail('请输入车主手机号');
					return '';
				}
				/* if (that.procure_price == '') {
					that.Msg.Fail('请输入指导价格');
					return '';
				} */
				if (that.content == '') {
					that.Msg.Fail('请输入车况');
					return '';
				}
				if (that.prov == '') {
					that.Msg.Fail('请选择车辆所在地');
					return '';
				}
				if (that.energy == 2) {
					that.energy = '新能源';
				} else {
					that.energy = '汽油';
				}
				const textToCopy = '批发价：' + that.market_price + '\n【车辆款型】' + that.series_name + '\n【上牌日期】' + that.reg_time + '\n【出厂日期】' + that
					.production_date +
					'\n【指 导 价】' + that.procure_price + '\n【排     量】' + that.output + '\n【排放标准】' + that.outext +
					'\n【真实公里】' + that.mileage +
					'\n【车辆配置】' + that.configuration + '\n【详细车况】' + that.content + '\n【过户次数】' + that.tran_num +
					'\n【所 在 地】' + that.pickerText +
					'\n【卖家电话】' ;
				let params = {
					title: that.series_name,
					logo: that.logo,
					brand_id: that.brand_id,
					info_id: that.info_id,
					brand_name: this.info.full_name,
					reg_time: that.reg_time,
					production_date: that.production_date,
					market_price: that.market_price,
					member_price: 0,
					output: that.output,
					outext: that.outext,
					mileage: that.mileage,
					is_auto: that.is_auto,
					energy: that.energy,
					configuration: that.configuration,
					images: that.imgdata,
					content: that.content,
					phone: that.phone,
					procure_price: that.procure_price,
					prov: that.prov,
					city: that.city,
					area: that.area,
					tran_num: that.tran_num,
					text_copy: textToCopy,
					group_id: that.group_id,
					series_id: that.series_id,
					series_name: that.series_name,
				};
				console.log(params)
				uni.showLoading({
					title: '发布中'
				});
				that.Net._post('auth/index/car_release_oss', params, res => {
					if (res.code == 1) {
						uni.hideLoading();
						/* uni.setClipboardData({
							data: textToCopy,
							success: function() {
								uni.showToast({
									title: '发布成功',
									icon: 'success',
									duration: 2000
								});
								uni.navigateBack({});
							}
						}); */
						that.Msg.Success('发布成功', res => {
							uni.navigateBack({});
						});
						return '';
						
					}
				});

			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},

		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				/* #endif */
			}
		},
		onReachBottom() {

		},
	}
</script>

<style>
	.pp {
	  white-space: pre-wrap; /* CSS属性，用于保留换行和自动换行 */
	  white-space: -moz-pre-wrap; /* 兼容Firefox */
	  white-space: -o-pre-wrap; /* 兼容Opera */
	  word-wrap: break-word; /* 单词内换行 */
	  word-break: break-all; /* 支持非英文字符的whole word break */
	  font-size: 11px !important;
	  /* color: #909399 !important; */
	}
	.clear_a{
		margin-top: 1.8vw;
		float: right;
		font-size: 3vw;
		color: red;
	}
	
	.header {
		background-color: transparent !important;
		height: 18vw !important;
	}

	.header .text {
		background-color: transparent !important;
		color: #333 !important;
	}

	.header .back {
		color: #333 !important;
	}

	.scrrolHeader {
		background-color: #FFE6D0 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .bg_content {
		width: 92%;
		position: absolute;
		left: calc(50% - 46%);
		top: calc(13.5vw + var(--status-bar-height));
		z-index: 98;
	}

	.details_box {
		width: 100%;
		margin-top: 4%;
		background-color: #fff;
		padding: 5vw 4%;
		border-radius: 3vw;
	}

	.details_boxNo {
		padding: 0vw 4%;
	}

	.details_box .details_title {
		font-size: 4.2vw;
		color: #333;
		font-weight: bold;
		margin-bottom: 5vw;
	}

	.details_box .input_box {
		width: 100%;
		display: flex;
		align-items: center;
		border-bottom: 2px solid #FC5D20;
		height: 15vw;
	}

	.details_box .input_box .m {
		font-size: 4vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		margin-top: 2vw;
	}

	.details_box .input_box input {
		font-size: 7vw;
		color: #333;
		flex: 1;
		font-weight: bold;
	}

	.details_box .list {
		width: 100%;
		padding: 5vw 0;
		border-bottom: 1px solid #F3F3F3;
		display: flex;
		align-items: center;
	}

	.details_box .list .name {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
	}
	
	.details_box .list .name_2 {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 2vw;
	}

	.details_box .list .text {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 1vw;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.details_box .list .text .i {
		width: 5vw;
		margin-right: 1vw;
	}

	.details_box .list .text .i image {
		width: 100%;
	}

	.details_box .list input {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		margin-right: 3vw;
		text-align: right;
		font-weight: bold;
	}

	.details_box .list .arrow {
		font-size: 3.5vw;
		color: #333;
	}

	.standing {
		width: 100%;
	}

	.standing image {
		width: 100%;
	}

	.standing .text {
		width: 100%;
		font-size: 3.8vw;
		color: #333;
		font-weight: bold;
		margin-top: 3vw;
		text-align: center;
	}

	.details_box .standing:nth-child(2) {
		margin-top: 5vw;
	}

	.details_box .ttr {
		width: 100%;
		height: 20vh;
		border-radius: 3vw;
		background-color: #eeeeee;
		padding: 2vw;
	}

	.details_box .ttr textarea {
		width: 100%;
		height: 100%;
		font-size: 3.5vw;
		color: #333;
	}

	.radio_box {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.radio_box .radio {
		margin-left: 3vw;
	}

	.radio_box .radio radio {
		font-size: 3.5vw;
	}

	.name_1 {
		font-size: 4.2vw;
		font-weight: bold;
		color: #333;
		margin-right: 4vw;
		padding: 2vw 0;
	}

	.textarea {
		flex: 1;
		font-size: 3.5vw;
		color: #333;
		font-weight: bold;
		border-bottom: 1px solid #F3F3F3;
		height: 30vw;
	}

	.img {
		width: 28vw;
		height: 28vw;
		border: 1px solid #e8e8e8;
		border-radius: 2vw;
		flex-basis: auto;
		margin-bottom: 3vw;
		margin-right: 2%;
		position: relative;
		box-sizing: border-box;
		display: inline-block;
		/* margin-top: 10vw; */
	}

	.img:last-child {
		margin-right: 0;
	}

	.img .xx {
		font-size: 4vw;
		color: #000;
		position: absolute;
		right: 0.5vw;
		top: 0.5vw;
	}

	.img image {
		width: 100%;
		height: 100%;
		border-radius: 2vw;
	}

	.addimg {
		width: 28vw;
		height: 28vw;
		border: 1px solid #e8e8e8;
		border-radius: 2vw;
		flex-basis: auto;
		margin-bottom: 3vw;
		position: relative;
		font-size: 10vw;
		line-height: 30vw;
		text-align: center;
		color: #e8e8e8;
		box-sizing: border-box;
		/* margin-top: 10vw; */
	}
</style>